<template>
    <div>
        <el-form ref="form" :model="obj.data" label-width="80px">
            <el-form-item label="标题" prop="title" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.title" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="题库分类" prop="subject_type">
                <el-select v-model="obj.data.subject_type" placeholder="请选择题库分类">
                    <el-option v-for="item in obj.type_list" :key="item.train_subject_type_id" :label="item.name" :value="item.train_subject_type_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="obj.data.type">
                    <el-radio v-for="x in globalData.subjectTypeList" :key="x" :label="x.value">{{x.text}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分数" prop="fen">
                <el-input-number class="defalut-input" v-model="obj.data.fen" clearable autocomplete="off"></el-input-number>
            </el-form-item>
            <el-form-item label="答案" prop="answer" v-if="obj.data.type==1">
                <el-radio-group v-model="obj.data.answer">
                    <el-radio v-for="x in obj.bools" :key="x" :label="x">{{x}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="内容" v-if="obj.data.type==0">
                <div style="width: 100%;">
                    <div class="item" v-for="(x,i) in obj.data.msg" :key="i">
                        <el-input v-model="x.answer" clearable autocomplete="off" style="float:left;"></el-input>
                        <el-checkbox style="margin-left: 10px;" v-model="x.isright">正解</el-checkbox>
                        <span class="clear" @click.prevent="del(i)">删除</span>
                    </div>
                </div>
                <div style="width:100%;"><span class="btn sub sub1" @click.prevent="add">添加选项</span></div>
            </el-form-item>
            <el-form-item class="dialog-btns-item">
                <div class="dialog-btns">
                    <span class="btn clear" @click="$emit('close')">取消</span>
                    <span class="btn sub ml10" @click.prevent="upData">提交</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        data:{
            id: inject("id").value || 0,
            title: "",
            subject_type: '',
            type:0,
            fen:0,
            answer:"对",
            msg: [],
        },
        bools:["对","错"],
        type_list: []
    })
    let add = () => {
        obj.data.msg.push({answer:""})
    }
    let del = t => {
        obj.data.msg.splice(t,1)
    }
    let init = async () => {
        if(obj.data.id > 0){
            proxy.$ajax({
                url: 'subject/get',
                data: { id: obj.data.id },
                bfLoading: true
            }).then(d => {
                // console.log(d)
                if(d.success){
                    obj.data = {...obj.data, ...d.msg,msg: (typeof d.msg.msg=='object')?d.msg.msg:(d.msg.msg?JSON.parse(d.msg.msg):[])}
                    obj.data.type = parseInt(obj.data.type)
                    obj.data.fen = parseInt(obj.data.fen)
                }else{
                    proxy.elMessageMixin(d.err, 'error')
                }
            }).catch(() => { })
        }
    }
    init()

    let gettype_list = ()=>{
        proxy.$ajax({
            url: '/subject/type_list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.type_list = d.msg.list
            }
        }).catch(() => { })
    }
    gettype_list()

    let upData = () => {
        // console.log(proxy.$refs)
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: 'subject/design',
                    data: obj.data,
                    bfLoading: true,
                    timeout:60000
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin(`${obj.data.id>0?'修改':"添加"}成功`, 'success')
                        proxy.$emit('init')
                        proxy.$emit('close')
                        //并刷新主界面
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
    .btn.sub.sub1 { width: 100px; margin:0; }
    .item { padding: 5px 0; display: flex; flex: 1; }
    .clear { width: 80px; height: 30px; box-sizing: border-box; margin-left: 10px; border: 1px solid #C0C4CC; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
</style>